<route lang="json5" type="home">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="login">
    <view class="login-background" :style="{ background: background }">
      <wd-img src="/static/images/shop.png" width="120rpx" height="100rpx"></wd-img>
      <text>好特麦{{ state.name }}</text>
    </view>
    <wd-form :model="state.data" ref="form" custom-class="login-form" errorType="toast">
      <wd-input
        placeholder="请输入手机号或账号"
        prop="username"
        :rules="[{ required: true, message: '请填写手机号或账号' }]"
        v-model="state.data.username"
        prefix-icon="user"
      ></wd-input>
      <wd-input
        prop="password"
        placeholder="请输入密码"
        v-model="state.data.password"
        :rules="[{ required: true, message: '请填写密码' }]"
        showPassword
        prefix-icon="lock-on"
      ></wd-input>
      <htm-button block @click="handleClick">登录</htm-button>
      <wd-checkbox v-model="state.agree">
        登录同意协议
        <text @click="toUserPrivacy">《服务协议、隐私政策》</text>
      </wd-checkbox>
    </wd-form>
    <view class="login-bottom">
      <view class="entry-item" @click="handleRegister">
        <image class="entry-icon" src="/static/images/register.png" mode="aspectFit"></image>
        <text class="entry-text">门店注册</text>
      </view>
      <view
        class="entry-item"
        v-if="state.operate === 'store'"
        @click="() => handleLogin('driver')"
      >
        <image class="entry-icon" src="/static/images/driver.png" mode="aspectFit"></image>
        <text class="entry-text">司机登录</text>
      </view>
      <view
        class="entry-item"
        v-if="state.operate === 'driver'"
        @click="() => handleLogin('store')"
      >
        <image class="entry-icon" src="/static/images/driver.png" mode="aspectFit"></image>
        <text class="entry-text">门店登录</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { IMpLoginParams, mplogin } from '@/service/login/login'
import { useProfileStore } from '@/store/profile'

const profileStore = useProfileStore()
const form = ref()
const { operate } = profileStore
const background = ref('linear-gradient(to bottom, #e93b3d, #ff6464)')

const state = reactive({
  data: {
    openid: '',
    username: '',
    password: '',
    isDriver: false,
  } as IMpLoginParams,
  agree: false,
  operate: 'store',
  name: '门店端',
})

const toUserPrivacy = () => {
  uni.navigateTo({
    url: '/pages/user-privacy/user-privacy',
  })
}
const handleClick = async () => {
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        if (!state.agree) {
          uni.showToast({ title: '请同意协议后在点击登录', icon: 'none' })
          return
        }
        const response = await mplogin(state.data)
        if (response.success) {
          if (response.result.token) {
            profileStore.setMpLoginParams(state.data)
            profileStore.setProfileInfo(response.result)
            if (state.data.isDriver) {
              uni.switchTab({
                url: '/pages/index-driver/index-driver',
              })
            } else {
              uni.switchTab({
                url: '/pages/index/index',
              })
            }
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: response.message,
          })
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}

const setName = (type) => {
  state.operate = type
  const { toggleTheme } = useTheme()
  toggleTheme()
  if (type === 'store') {
    state.name = '门店端'
    state.data.isDriver = false
    background.value = 'linear-gradient(to bottom, #e93b3d, #ff6464)'
  }
  if (type === 'driver') {
    state.name = '司机端'
    state.data.isDriver = true
    background.value = 'linear-gradient(to bottom, #3377fe, #689bff)'
  }
}

const handleRegister = () => {
  profileStore.setOperate('store')
  setName('store')
  uni.redirectTo({
    url: '/pages/register/register',
  })
}

const handleLogin = (type: string) => {
  profileStore.setOperate(type)
  setName(type)
}

onLoad((query) => {
  if (query?.operate) {
    profileStore.setOperate(query.operate)
    setName(query.operate)
  } else {
    setName(operate)
  }
})
</script>

<style lang="scss">
.login {
  position: relative;
  height: 100vh;
  height: calc(100vh - constant(safe-area-inset-bottom));
  height: calc(100vh - env(safe-area-inset-bottom));
}
.login-background {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 36vh;
  color: white;
  .wd-img {
    margin-top: -60rpx;
  }
  text {
    margin-top: 30rpx;
    font-size: 70rpx;
    font-weight: bold;
  }
}

.login-bottom {
  position: absolute;
  bottom: 40rpx;
  display: flex;
  justify-content: center;
  width: 100vw;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 80rpx;
}

.entry-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.entry-text {
  font-size: 24rpx;
  color: #666666;
}

.entry-item:active {
  opacity: 0.8;
}
</style>
<style lang="scss">
.login-form {
  width: calc(90vw - 120rpx);
  padding: 10rpx 40rpx 40rpx;
  margin: 0 auto;
  margin-top: -100rpx;
  text-align: center;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  .wd-input,
  .wd-button {
    margin-top: 40rpx;
  }
  .wd-input {
    height: 68rpx;
    padding: 10rpx 20rpx;
    background-color: #f8f8f8;
    border-radius: 10rpx;
    :deep(.wd-input__icon) {
      font-size: 40rpx;
      background-color: transparent;
    }
  }
  :deep(.wd-input)::after {
    background-color: transparent;
  }
  :deep(.wd-input.is-not-empty):not(.is-disabled)::after {
    background-color: transparent;
  }
  .wd-button {
    height: 80rpx;
  }
  .wd-checkbox {
    margin-top: 80rpx;
    :deep(.wd-checkbox__txt) {
      font-size: 24rpx;
      color: var(--wot-color-theme);
    }
  }
}
</style>
